<template>
    <div>
        <navigationBar :backType="2" navigationTitle="选择服务师" />

        <view
            class="wrap-search flex align-center just-center"
            :style="'top:' + navigationHeight + 'px'"
        >
            <view class="search-bg flex align-center">
                <image
                    class="img"
                    :src="getImageURL('technician/choose/search.png')"
                />
                <view class="line"></view>

                <input
                    class="input"
                    type="text"
                    placeholder="请输入服务师姓名"
                    v-model="keywords"
                />

                <view class="search" v-if="keywords" @click="search">搜索</view>
            </view>
        </view>

        <view class="wrap paddingBottom">
            <view class="wrap-list">
                <block v-for="(item, index) in list" :key="index">
                    <view
                        class="item flex align-center"
                        @click="onChoose(index)"
                    >
                        <view class="choose">
                            <image
                                v-if="selectIndex === index"
                                :src="
                                    getImageURL(
                                        'technician/choose/choose_select.png'
                                    )
                                "
                            />

                            <image
                                v-else
                                :src="
                                    getImageURL(
                                        'technician/choose/choose_normal.png'
                                    )
                                "
                            />
                        </view>

                        <view class="right flex align-center just-between">
                            <image class="avatar" :src="item.work_image" />

                            <view class="nickname f-30">
                                {{ item.name }}
                            </view>

                            <view class="flex align-center">
                                <image
                                    class="location-img"
                                    :src="
                                        getImageURL(
                                            'technician/choose/location.png'
                                        )
                                    "
                                />
                                <view class="location">
                                    {{ item.distance }}
                                </view>
                            </view>
                        </view>
                    </view>
                </block>
                <emptyData v-if="list.length === 0" :text="'暂无数据'" />
            </view>
        </view>

        <view class="wrap-footer safe-area flex align-center just-center">
            <view class="choose-btn fb-28" @click.stop="onSure">
                确认选择
            </view>
        </view>
    </div>
</template>

<script>
import { technicianList } from "@/API/API/technician.js";
import emptyData from "@/components/components/emptyData/emptyData.vue";
export default {
    components: {
        emptyData,
    },
    data() {
        return {
            navigationHeight: this.$navigationHeight,

            keywords: "",

            list: [],
            selectIndex: -1,
            total: 0,
            page: 1,
        };
    },
    onLoad() {
        this.initData();
    },
    // 加载更多
    onReachBottom() {
        // 加载更多
        if (this.list.length < this.total) {
            this.page++;
            this.getData();
        }
    },

    onPullDownRefresh() {
        this.onRefresh();
    },
    methods: {
        onRefresh() {
            this.page = 1;
            this.list = [];
            this.initData();  
        },
        /**
         * 选择
         */
        onChoose(index) {
            this.selectIndex = index;
        },
        /**
         * 确认选择
         */
        onSure() {
            const index = this.selectIndex;
            if (index === -1) {
                this.$st.show("请选择服务师");
                return;
            }

            uni.$emit("chooseTechnician", this.list[index]);
            uni.navigateBack();
        },
        search() {
            this.page = 1;
            this.list = [];
            this.initData();
        },
        // 初始化数据
        initData() {
            technicianList({
                service_id: 0,
                area_id: "",
                lat: "0",
                lng: "0",
                keyword: this.keywords,
                page: this.page,
            })
                .then((res) => {
                    res.data.data.select = false;
                    this.list.push(...res.data.data);
                    this.total = res.data.total;
                })
                .catch((res) => {
                    uni.showToast({
                        title: res.msg,
                        icon: "none",
                    });
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.wrap-search {
    position: sticky;
    left: 0;
    width: 100%;
    height: 100rpx;
    z-index: 10;
    background-color: white;
    overflow: hidden;

    .search-bg {
        width: 710rpx;
        height: 60rpx;
        background-color: $bg-color;
        border-radius: 20rpx;
        overflow: hidden;

        .img {
            margin-left: 22rpx;
            width: 27rpx;
            height: 25rpx;
        }
        .line {
            margin-left: 14rpx;
            width: 2rpx;
            height: 32rpx;
            background-color: #b0b0b0;
        }
        .input {
            margin-left: 14rpx;
            flex: 1;
            margin-right: 20rpx;
            color: $title-color;
        }
        .search {
            width: 100rpx;
            height: 50rpx;
            line-height: 50rpx;
            text-align: center;
            color: $bg-text-color;
            background: $grad-theme-color;
            border-radius: 30rpx;
            overflow: hidden;
            margin-right: 10rpx;
        }
        .place {
            color: #b0b0b0;
        }
    }
}

.wrap {
    --bottom-height: 140rpx;

    .wrap-list {
        padding: 20rpx 0;
        width: 100%;
        overflow: hidden;

        .item {
            width: 100%;
            overflow: hidden;
            margin-bottom: 20rpx;
            padding: 0rpx 20rpx;
            box-sizing: border-box;

            &:last-child {
                margin-bottom: 0;
            }

            .choose {
                width: 38rpx;
                height: 38rpx;

                > image {
                    width: 100%;
                    height: 100%;
                }
            }
            .right {
                margin-left: 20rpx;
                flex: 1;
                background-color: white;
                padding: 30rpx 20rpx 30rpx 30rpx;
                box-sizing: border-box;
                border-radius: 20rpx;
                overflow: hidden;

                .avatar {
                    width: 98rpx;
                    height: 98rpx;
                    border-radius: 50%;
                    overflow: hidden;
                    background-color: #eee;
                }
                .nickname {
                    margin-left: 30rpx;
                    flex: 1;
                    color: $title-color;
                }
                .location-img {
                    width: 24rpx;
                    height: 28rpx;
                }
                .location {
                    margin-left: 16rpx;
                    color: $title-color;
                }
            }
        }
    }
}

.wrap-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 128rpx;
    background-color: white;
    z-index: 10;

    .choose-btn {
        width: 698rpx;
        height: 94rpx;
        line-height: 94rpx;
        text-align: center;
        color: $bg-text-color;
        background: $grad-theme-color;
        border-radius: 50rpx;
        overflow: hidden;
    }
}
</style>
